
<template>
  <div class="pms-table-search">
    <el-form v-if="!detail" ref="form" :model="form" label-width="130px" size="mini" :inline="true" style="margin-bottom: 10px;">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="项目编码" style="width: 100%">
            <el-input v-model="form.prjCode" class="pms-zr-input" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="物料编码" style="width: 100%">
            <el-input v-model="form.materialCode" class="pms-zr-input" />
          </el-form-item>
        </el-col>
        <el-col :span="12" style="text-align: right;padding-top: 5px">
          <el-button size="mini" class="pms-zr-button-primary" @click="getTable">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :span-method="objectSpanMethod"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="50" fixed />
      <el-table-column
        v-for="item in column"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        align="center"
        :width="item.width"
      >

        <template slot-scope="scope">
          <span class="header-tooltip" style="width: 100%;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;display: block;" :title="scope.row[item.value]">{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getServiceDetailConfigApi } from '@/api/acceptance'

export default {
  name: 'MaterialTabs',
  props: ['prjId', 'detail'],
  data() {
    return {
      tableData: [],
      column: [
        {
          label: '物料编码',
          value: 'materialCode',
          width: '180'
        },
        {
          label: '物料名称',
          value: 'materialName'
        },
        {
          label: '累计验工计价金额',
          value: 'sumMoney'
        },
        {
          label: '明细物料编码',
          value: 'detailMaterialCode'
        },
        {
          label: '明细物料名称',
          value: 'detailMaterialName'
        },
        {
          label: '数量',
          value: 'detailNum'
        },
        {
          label: '占比(%)',
          value: 'detailProportion'
        },
        {
          label: '金额',
          value: 'detailMoney'
        },
        {
          label: '资源资产编码',
          value: 'resourceAssetCode'
        },
        {
          label: '标签ID',
          value: 'labelId'
        }
      ],
      form: {
        'materialCode': '',
        'prjCode': '',
        'prjId': this.prjId
      },
      keyCode: 'materialCode',
      mergeArr: [],
      prjCodeMergeArr: []
    }
  },
  created() {
    if (!this.detail) {
      this.column = ([{
        label: '子项目编码',
        value: 'prjCode',
        width: '180'
      }, ...this.column])
    }
    this.getTable()
  },
  methods: {
    getSpanArr(data, key) {
      let count = 0 // 需要合并行的起始位置
      const arr = []
      data.forEach((item, index) => {
        if (index === 0) {
            arr.push(1)
        } else {
          if (item[key] === data[index - 1][key]) {
              arr[count] += 1
              arr.push(0)
          } else {
            count = index
              arr.push(1)
          }
        }
      })
        return arr
    },
      getSpanArrMerge(data) {
          const arr = []
          let count = 0 // 需要合并行的起始位置
          data.forEach((item, index) => {
              if (index === 0) {
                  arr.push(1)
              } else {
                  if (item['prjCode'] === data[index - 1]['prjCode'] && item['materialCode'] === data[index - 1]['materialCode']) {
                      arr[count] += 1
                      arr.push(0)
                  } else {
                      count = index
                      arr.push(1)
                  }
              }
          })
          return arr
      },
    getRowArr(arr, rowIndex) {
      if (arr[rowIndex]) {
        return [arr[rowIndex], 1]
      } else {
        return [0, 0]
      }
    },
    async getTable() {
     const result = await getServiceDetailConfigApi(this.form)
      this.tableData = result.data
        if (!this.detail) {
            this.prjCodeMergeArr = this.getSpanArr(result.data, 'prjCode')
            this.mergeArr = this.getSpanArrMerge(result.data)
        } else {
            this.mergeArr = this.getSpanArr(result.data, 'materialCode')
        }
        console.log(this.prjCodeMergeArr, this.mergeArr)
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
        if (!this.detail) {
            if ([1].includes(columnIndex) && this.prjCodeMergeArr.length > 0) {
                return this.getRowArr(this.prjCodeMergeArr, rowIndex)
            }
            if ([2, 3, 4].includes(columnIndex) && this.mergeArr.length > 0) {
                return this.getRowArr(this.mergeArr, rowIndex)
            }
        } else {
            if ([1, 2, 3].includes(columnIndex) && this.mergeArr.length > 0) {
                return this.getRowArr(this.mergeArr, rowIndex)
            }
        }
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
